<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
       <div class="box">
        <!-- 每一项 -->
         <!-- <div v-for="(item,index) in list">{{item.name}}</div> -->
         <div v-for="item in list" :key="item.id">{{item.name}}
        <!-- 可能显示手机类型 -->
         <!-- 1判断 
          :如果每一项中有typeList 就显示
        -->
         <div v-if="item.typeList">
             <!-- 工作中：嵌套列表 -->
               <span v-for="(itemT,indexT) in item.typeList">{{itemT.name}}</span>
         </div>
         </div>
         <button @click="change">点击</button>

         

       </div> 
    
    </div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
// 列表渲染=》就是当页面布局基本一致，数据是不同
 
// 语法： v-for ="item in 数据"
// item 数组的每一项
// index 数组的索引


//注意：v-for 一定和key 一起使用 =》vue底层更新数据 diff 算法

//diff 算法 作用：实现最小量的更新

//在vue中通过key 来判断是否是同一个元素，如果key不同，重新创建



  let app =   new Vue({ //vue 属性
          el:'#app', //选择中的元素=》包括自己和里面的元素可以使用 vue 语法
          data:{ //存放数据
            msg:'张三',
            list:[
                {name:'手机',id:1,typeList:[{name:'小米'},{name:"华为"}]},
                {name:'电视',id:2},
                {name:'笔记本',id:3},
                {name:'耳机',id:4},

            ]
            
          },
          methods:{
            change(){
                // console.log(this==app); // app
                this.list.splice(1,1)
                console.log(this);
            }
          }
      
     })


     //v-if 和v-show 区别？

     //（1） v-if 不满足条件 元素不创建
     // 而 v-show 不满足条件 隐藏元素=》css=> display:none
</script>
</html>